<template>
	<view class="">
		<view class="info-data" style="display: flex;justify-content: space-between;">
			<view class="LOGO">
				<view class="title">
					{{$t('dayareleasei.LOGO')}} <text>*</text>
				</view>
				<view class="up">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1"></u-upload>
				</view>
			</view>
			<view class="Cover">
				<view class="title">
					{{$t('dayareleasei.Cover')}} <text>*</text>
				</view>
				<view class="up">
					<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
						:maxCount="1"></u-upload>
				</view>
			</view>
		</view>
		<view class="info-data">
			<view class="Talent">
				<view class="title">
					{{$t('dayareleasei.Talent')}} <text>*</text>
				</view>
				<view class="input">
					<u--input :placeholder="$t('dayareleasei.enter')" maxlength="30" border="surround"
						v-model="params.name">
					</u--input>
					<view class="text">
						{{params.name.length}}/30
					</view>
				</view>
			</view>
		</view>
		<view class="info-data">
			<view class="tag">
				<view class="title">
					{{$t('dayareleasei.tag')}} <text>*</text>
				</view>
				<view class="input">
					<u--input :placeholder="$t('dayareleasei.tagex')" maxlength="30" border="surround"
						v-model="params.services" placeholderStyle="color:#2B9AFF;">
					</u--input>
				</view>
			</view>
		</view>
		<view class="info-data">
			<view class="Contact">
				<view class="title">
					{{$t('dayareleasei.Contact')}} <text>*</text>
				</view>
				<view class="input">
					<u--input :placeholder="$t('dayareleasei.enter')" border="surround" v-model="params.mobile">
					</u--input>
				</view>
			</view>
		</view>
		<view class="info-data">
			<view class="Category">
				<view class="title">
					{{$t('dayareleasei.Category')}} <text>*</text>
				</view>
				<view class="input" @click="gocategry">
					<u--input disabled :placeholder="$t('dayareleasei.enter')" border="surround" v-model="params.Category">
					</u--input>
					<view class="text">
						<u-icon name="arrow-right" color="#acacac" size="18"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="info-data">
			<view class="Details">
				<view class="title">
					{{$t('dayareleasei.Details')}}
				</view>
				<view class="input">
					<u--textarea maxlength="500" border="surround" v-model="params.brief"
						:placeholder="$t('dayareleasei.enter')">
					</u--textarea>
					<view class="Detailstext">
						{{params.brief.length}}/500
					</view>
				</view>
			</view>
		</view>
		<view class="info-data">
			<view class="Photo">
				<view class="title">
					{{$t('dayareleasei.Photo')}} <text class="mixtitle">({{$t('dayareleasei.max')}})</text>
				</view>
				<view class="up">
					<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="9"></u-upload>
				</view>
			</view>
		</view>
		<view class="info-data">
			<view class="Regions">
				<view class="title">
					{{$t('dayareleasei.Regions')}} <text>*</text>
				</view>
				<view class="check-box" style="display: flex; vertical-align: middle; align-items: center;">
					<view class="">
						<u-radio-group v-model="Regions">
							<u-radio shape="circle" labelColor="#488dff" :labelDisabled="true" :name="Regions"
								:label="label"></u-radio>
						</u-radio-group>
					</view>
					<view style="color: #488dff; font-size: 28rpx; margin-left: 20rpx;">({{params.address2}})</view>
				</view>
				<view class="check-box_btn">
					<view>
						{{$t('dayareleasei.All')}}
					</view>
					<view>
						<u-button type="primary" @click="contact" shape="circle" :text="$t('dayareleasei.contact')"
							size="mini">
						</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="info-data">
			<view class="Location">
				<view class="title">
					{{$t('dayareleasei.Location')}}<text>*</text>
				</view>
				<view class="check-box">
					<u-radio-group v-model="Regions">
						<u-radio shape="circle" labelColor="#488dff" :labelDisabled="true" :name="Regions" label="">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<view class="info-data">
			<view class="Address">
				<view class="title">
					{{$t('dayareleasei.Address')}} <text>*</text>
				</view>
				<view class="input">
					<u--input :placeholder="$t('dayareleasei.ex')" placeholderStyle="color:#2B9AFF;" border="surround"
						v-model="params.Address">
					</u--input>
				</view>
			</view>
		</view>
		<view class="line">
			<view class="u-line">

			</view>
		</view>
		<view class="info-data">
			<view class="apply">
				<view class="title">
					<view class="title_text">
						{{$t('dayareleasei.DurationApply')}}
						<view class="mintitle">
							({{$t('dayareleasei.FOC')}})
						</view>
					</view>
				</view>
				<view class="check-box">
					<u-switch v-model="switchbox" @change="change"></u-switch>
				</view>
			</view>
		</view>
		<view class="info-data" v-show="switchbox == true">
			<view class="Duration">
				<view class="title">
					{{$t('dayareleasei.Duration')}}
				</view>
				<view class="picker-box">
					<view style="margin-right: 10rpx;" @click="show = !show">
						{{params.day}}
					</view>
					<view class="">
						<u-icon name="arrow-up" @click="show = false" v-if="show" color="#6F6F6F" size="16"></u-icon>
						<u-icon name="arrow-down" @click="show = true" v-else color="#6F6F6F" size="16"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="info-data" v-if="switchbox == true">
			<view class="Token">
				<view class="title">
					{{$t('dayareleasei.Token')}}
				</view>
				<view class="text">
					{{params.Token}}
				</view>
			</view>
		</view>
		<view class="info-data" v-if="switchbox == true">
			<view class="Token-Balance">
				<view class="title">
					{{myinfo[0].typeNote || '' }}
				</view>
				<view class="text">
					availble token <text>{{myinfo[0].balance}}</text>
				</view>
			</view>
		</view>
		<view class="line">
			<view class="u-line">

			</view>
		</view>
		<view class="Submit">
			<view class="protocol">
				<view class="">
					<u-checkbox-group @change="checkboxChange">
						<u-checkbox v-model="checked" shape="circle"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view>
					{{ $t('dayareleasei.deal') }}
					<text style="color: #ff7c00"
						v-on:click.stop="goTerms('applet_agreement_shop')">{{ $t('dayareleasei.Customer') }}</text>
				</view>
			</view>
			<u-button type="primary" v-if="checked == true" @click="SUBMIT" shape="circle"
				:text="$t('dayareleasei.SUBMIT')"></u-button>
			<u-button :plain="true" v-else shape="circle" :text="$t('dayareleasei.SUBMIT')"></u-button>
		</view>
		<u-picker :show="show" keyName="name" :confirmText="$t('user.yes')" :cancelText="$t('user.cancel')"
			:columns="columns" @close="close" @cancel="close" @confirm="confirm">
		</u-picker>
		<contact v-if="contshow == true" @hide="hidecont"></contact>
		<u-picker :show="iscategry" keyName="name" :confirmText="$t('user.yes')" :cancelText="$t('user.cancel')"
			:columns="columns2" @close="close2" @cancel="close2" @confirm="confirm2">
		</u-picker>
	</view>
</template>

<script>
	import contact from "@/components/contact.vue"
	export default {
		components: {
			contact,
		},
		data() {
			return {
				switchbox: false,
				checked: false,
				Regions: '',
				contshow: false,
				params: {
					name: '',
					services: "",
					brief: "",
					Address:"",
					mobile:"",
					day:"",
					Token:"",
					topTime:"",
					address2:"",
					Category:"",
					Categoryid:""
				},
				fileList1: [],
				fileList2: [],
				fileList3: [],
				show: false,
				columns: [],
				myinfo: [],
				columns2:[],
				label: this.$t('dayareleasei.Current'),
				iscategry:false
			}
		},
		onLoad() {
			this.getday()
			this.getnumber()
			this.getaddress()
			this.category()
		},
		methods: {
			gocategry(){
				this.iscategry = true
			},
			category(){
				let params = {
					map: "applet_city_shop_page"
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						let array = [
							[]
						]
						array[0] = res.data.data.category
						this.columns2 = array
						this.params.Category = res.data.data.category[0].name
						this.params.Categoryid = res.data.data.category[0].id
					} else {
						
					}
				})
			},
			hidecont() {
				this.contshow = false
			},
			contact() {
				this.contshow = true
			},
			getaddress() {
				let params = {
					map: "applet_baidu_api_country"
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.params.address2 = res.data.data
					} else {
						uni.showToast({
							title: this.$t('login.msg'),
							icon: 'none'
						})
					}
				})
			},
			SUBMIT() {
				uni.showLoading({
					mask: true
				})
				const params = {
					map: 'applet_city_post_pay',
					categoryId: this.params.Categoryid,
					type: 'post',
					payType: 3,
					dateId:this.params.topTime,
					mobile: this.params.mobile,
				}
				if (this.switchbox == false) {
					this.getform()
				} else {
					this.$Request({
						method: 'GET',
						data: params
					}).then(res => {
						if (res.data.ec == 200) {
							uni.hideLoading()
							uni.showToast({
								title: res.data.data.msg,
								icon: 'none'
							})
							this.getform()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.data.em,
								icon: 'none'
							})
						}
					})
				}
				
			},
			getform() {
				uni.showLoading({
					mask: true
				})
				let logo = ''
				if (this.fileList1.length > 0) {
					this.fileList1.map(item => {
						logo = item.url
					})
				}
				let cover = ''
				if (this.fileList2.length > 0) {
					this.fileList2.map(item => {
						cover = item.url
					})
				}
				let content = []
				if (this.fileList3.length > 0) {
					this.fileList3.map(item => {
						content.push(item.url)
					})
				}
				const params = {
					map: 'applet_city_new_shop_apply',
					logo: logo,
					cover: cover,
					name: this.params.name,
					services: this.params.services,
					openTime: '00:00',
					closeTime: '23:59',
					brief: this.params.brief,
					'content[]':content,
					address: this.params.Address,
					mobile: this.params.mobile,
					dateId:this.params.topTime		
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						uni.showToast({
							title: res.data.data.msg,
							icon: 'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.data.em,
							icon: 'none'
						})
					}
				})
			},
			getnumber() {
				const params = {
					map: 'applet_pay_cfg',
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.myinfo = res.data.data
					} else {

					}
				})
			},
			getday() {
				const params = {
					map: 'applet_city_shop_apply_cost',
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						let array = [
							[]
						]
						array[0] = res.data.data
						this.columns = array
						this.params.day = res.data.data[0].name
						this.params.Token = res.data.data[0].amount
						this.params.topTime = res.data.data[0].id
					} else {

					}
				})
			},
			checkboxChange(n) {
				this.checked = !this.checked
			},
			goTerms(map) {
				uni.navigateTo({
					url: '/pages/Agreement/Agreement?map=' + map
				})
			},
			confirm(e) {
				this.show = false
				console.log(e)
				this.params.day = e.value[0].name
				this.params.Token = e.value[0].amount
				this.params.topTime = e.value[0].id
			},
			confirm2(e) {
				this.iscategry = false
				console.log(e)
				this.params.Category = e.value[0].name
				this.params.Categoryid = e.value[0].id
			},
			close() {
				this.show = false
			},
			close2() {
				this.iscategry = false
			},
			change(e) {
				console.log('change', e);
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://dongya.hualin688.com/applet.php', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						formData: {
							map: "applet_img_upload"
						},
						success: (res) => {
							setTimeout(() => {
								let res1 = JSON.parse(res.data)
								resolve("https://dongya.hualin688.com" + res1.data.path)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.line {
		height: 20rpx;
		background-color: #fff;

		.u-line {
			height: 20rpx;
			background-color: #F4F5F6;
			margin-top: 20rpx;
		}
	}

	.input {
		margin-top: 20rpx;
		position: relative;

		.text {
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			font-size: 26rpx;
			color: #999;
		}

		.Detailstext {
			position: absolute;
			right: 20rpx;
			font-size: 26rpx;
			color: #999;
			bottom: 20rpx;
		}
	}

	.info-data {
		padding: 10rpx 20rpx;
		margin-top: 20rpx;

		.Category {
			.title {
				font-weight: 600;

				text {
					color: red;
				}

			}
		}

		.Talent {
			.title {
				font-weight: 600;

				text {
					color: red;
				}

			}
		}

		.Contact {
			.title {
				font-weight: 600;

				text {
					color: red;
				}

			}
		}

		.Details {
			.title {
				font-weight: 600;
			}
		}

		.LOGO {
			.title {
				font-weight: 600;

				text {
					color: red;
				}

				.mixtitle {
					color: #999;
					font-size: 24rpx;
				}
			}

			.up {
				margin-top: 20rpx;
			}
		}

		.Photo {
			.title {
				font-weight: 600;

				text {
					color: red;
				}

				.mixtitle {
					color: #999;
					font-size: 24rpx;
				}
			}

			.up {
				margin-top: 20rpx;
			}
		}

		.Cover {
			.title {
				font-weight: 600;

				text {
					color: red;
				}

				.mixtitle {
					color: #999;
					font-size: 24rpx;
				}
			}

			.up {
				margin-top: 20rpx;
			}
		}

		.Regions {
			.title {
				font-weight: 600;

				text {
					color: red;
				}
			}

			.check-box_btn {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
			}

			.check-box {
				margin-top: 20rpx;
			}
		}

		.Location {
			display: flex;
			align-items: center;

			.title {
				font-weight: 600;

				text {
					color: red;
				}
			}

			.check-box {
				margin-left: 20rpx;
			}
		}

		.Address {
			.title {
				font-weight: 600;

				text {
					color: red;
				}
			}
		}

		.tag {
			.title {
				font-weight: 600;

				text {
					color: red;
				}
			}
		}

		.apply {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				display: flex;
				align-items: center;
				font-weight: 600;

				.mintitle {
					font-weight: 100;
					font-size: 24rpx;
					margin-top: 10rpx;
				}

				.top {
					margin-left: 20rpx;
				}
			}

		}

		.Duration {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-weight: 600;
			}

			.picker-box {
				display: flex;
				align-items: center;
			}
		}

		.Token {
			display: flex;
			justify-content: space-between;
			padding-right: 40rpx;

			.title {
				font-weight: 600;

			}

			.text {
				color: red;
				font-weight: 600;
			}
		}

		.Token-Balance {
			padding: 40rpx 30rpx;
			background-color: #F4F5F6;
			display: flex;
			border-radius: 10rpx;
			justify-content: space-between;

			.title {
				font-weight: 600;
			}

			.text {
				color: #999;

				text {
					color: red;
				}
			}
		}

	}

	.Submit {
		padding: 20rpx 30rpx;

		.protocol {
			width: 100%;
			display: flex;
			color: #000;
			margin: 0 auto;
			font-size: 24rpx;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
		}
	}
</style>
